<!--
 * @Description: 商家寝室推广进度编辑
 * @Author: liyujie
 * @Date: 2021/2/23
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/2/23
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <!-- header -->
            <div class="header">
                <div class="header-title">
                    编辑进度
                </div>
            </div>
            <!-- /header -->
            <div class="tips-view">
                说明：当前的是对批次组进行编辑进度操作，是对批次组内的所有商家进行批量操作，操作前请核对商家信息以及实际推广进度，请谨慎操作
            </div>
            <div
                class="tips-view"
                style="margin-top: 0"
                v-if="task_info.pause_status"
            >
                批次当前推广状态：
                <span style="color: #F56C6C;margin-right: 24px">
                    {{ task_info.pause_status === 1 ? '已暂停' : '已终止' }}
                </span>
                {{ task_info.pause_status === 1 ? '批次暂停时间' : '批次终止时间' }}：{{ task_info.pause_time * 1000 | dateFormatter('yyyy-MM-dd HH:mm:ss') }}
            </div>
            <!-- table -->
            <el-table
                :data="tableData"
                height="100%"
                style="width: 100%;"
                ref="tempLateName"
                class="data-table"
            >
                <el-table-column
                    label="推广步骤"
                    show-overflow-tooltip
                    align="left"
                    :formatter="emptyFormatter"
                >
                    <template slot-scope="scope">
                        步骤{{ scope.$index + 1 }}、{{ scope.row.title }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="完成状态"
                    show-overflow-tooltip
                    align="center"
                    :formatter="emptyFormatter"
                >
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.status"
                            active-text="已完成"
                            inactive-text="未完成"
                            :active-value="1"
                            :inactive-value="0"
                            :disabled="scope.row.status === 1 || task_info.pause_status !== 0 || task_info.status === 1 || task_info.status === 2"
                            @change="handleSwitchChange(scope)"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="left"
                    width="200"
                >
                    <template slot-scope="scope">
                        <div class="option-btn-group">
                            <el-button
                                type="text"
                                size="medium"
                                @click="showEditDialog(scope.row, 'detail')"
                            >
                                查看详情
                            </el-button>
                            <el-button
                                type="text"
                                size="medium"
                                :disabled="task_info.pause_status !== 0 || task_info.status === 1 || task_info.status === 2"
                                @click="showEditDialog(scope.row, 'edit')"
                            >
                                编辑详情
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- /table -->
            <div
                class="footer-btn"
                v-if="task_info.pause_status !== 2"
            >
                <el-button
                    size="medium"
                    :style="{width: '120px', marginRight: '24px'}"
                    @click="handlePause(task_info.pause_status === 1 ? 0 : 1)"
                >
                    {{ task_info.pause_status === 1 ? '启动推广任务' : '暂停推广任务' }}
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="handleStop"
                >
                    终止推广任务
                </el-button>
            </div>
        </div>

        <el-dialog
            :title="type === 'detail' ? '查看进度详情' : '编辑进度详情'"
            width="880px"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible"
            @close="handleDialogClose"
            z-index="1000"
        >
            <el-form :model="ruleForm">
                <el-form-item label="进度详情">
                    <ueditor
                        v-if="dialogVisible"
                        ref="ueditor"
                        :default-value="ruleForm.info"
                        style="margin-left: 72px;margin-top: 12px"
                    />
                </el-form-item>
            </el-form>
            <div
                class="dialog-btn"
                v-if="type !== 'detail'"
            >
                <el-button
                    size="medium"
                    style="width: 120px;margin-right: 24px"
                    @click="dialogVisible = false"
                >
                    取消
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    style="width: 120px;"
                    @click="handleSubmit"
                >
                    {{ type === 'add' || status === 1 ? '发布' : '保存' }}
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import ueditor from '@/components/common/ueditor.vue';

export default {
    name: 'DormExtensionEdit',
    mixins: [back],
    components: {ueditor},
    data() {
        return {
            // add新增 detail查看 edit保存模式
            type: 'add',
            // status 1完成 0未完成
            status: 0,
            dateTimeRange: [],
            dialogVisible: false,
            ruleForm: {
                series_no: '',
                info: '',
                step_id: '',
                // 是否设置完成 1是
                set_complete: 0
            },
            tableData: [],
            task_info: {},
            authResult: {}
        };
    },
    computed: {},
    watch: {},

    mounted() {
        this.$store.commit('SET_HEADER', [{title: "官网"}, {title: '商家增值服务'}, {title: '寝室视频推广进度', path: '/bid/dorm-extension-list'}, {title: '编辑进度'}]);
        this.authResult = this.$route.meta.authResult;
        this.ruleForm.series_no = this.$route.query.no;
        this.getTableData();
    },

    methods: {

        /**
         * @description 获取列表数据
         * @param page
         */
        getTableData(page) {

            this.tableLoading = true;
            let params = {
                series_no: this.ruleForm.series_no
            };

            this.$post('/student/room_series_task%5Cget_step', params, res => {
                if (res.code === 1) {
                    this.tableData = res.data.list;
                    this.task_info = res.data.task_info;
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: res.msg
                    });
                }
                this.tableLoading = false;
            });
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 点击完成任务
         * @param row
         * @param $index
         */
        handleSwitchChange({row, $index}) {

            if ($index && this.tableData[$index - 1].status === 0) {
                this.$message.warning('未完成前一项任务');
                this.tableData[$index].status = 0;
                return;
            }
            this.ruleForm.info = row.info ? row.info : '此步骤的进度已完成，已进入下一个推广步骤，请注意查看寝室推广动态。';
            this.ruleForm.step_id = row.step_id;
            this.type = 'add';
            this.ruleForm.set_complete = 1;
            this.dialogVisible = true;
        },

        /**
         * 提交进度
         */
        handleSubmit() {

            // 未发布 新增
            if(this.status === 0 && this.type === 'add') {
                this.$confirm('是否确认发布，内容成功发布后此步骤的推广状态将变更为已完成，完成状态不能修改', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.setStep();
                });
            }

            // 已发布编辑
            if(this.status === 1 && this.type === 'edit') {
                this.$confirm('是否确认发布', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.setStep();
                });
            }

            // 未发布编辑
            if(this.status === 0 && this.type === 'edit') {
                this.setStep();
            }
        },


        /**
         * 发布内容
         */
        setStep() {
            this.ruleForm.info = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';
            let params = {...this.ruleForm};

            this.$post('/student/room_series_task%5Cset_step', params, res => {
                if (res.code === 1) {
                    this.$notify({
                        title: '提示',
                        type: 'success',
                        message: this.type === 'edit' ? '内容已保存' : '内容已发布成功'
                    });
                    this.dialogVisible = false;
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: res.msg
                    });
                }
            });
        },

        /**
         * 暂停推广任务
         */
        handlePause (status) {
            if(!this.authResult.auth_pause) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$confirm('是否确认暂停该批次寝室推广?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {

                this.$post('/student/room_series_task%5Cpause', {
                    series_no: this.ruleForm.series_no,
                    status
                }, res => {
                    if (res.code === 1) {
                        this.getTableData();
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '操作成功'
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            });
        },
        /**
         * 终止推广任务
         */
        handleStop () {
            if(!this.authResult.auth_stop) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$confirm('是否确认终止该批次寝室推广，推广任务终止后，将不能重新启动', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {

                this.$post('/student/room_series_task%5Cstop', {series_no: this.ruleForm.series_no}, res => {
                    if (res.code === 1) {
                        this.getTableData();
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '操作成功'
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            });
        },

        /**
         * 查看编辑详情
         * @param row
         * @param type
         */
        showEditDialog(row, type) {
            this.type = type;
            this.status = row.status;
            this.ruleForm.step_id = row.step_id;
            this.ruleForm.set_complete = 0;
            this.ruleForm.info = row.info;
            if(type === 'edit') {
                this.ruleForm.info = row.info ? row.info : '此步骤的进度已完成，已进入下一个推广步骤，请注意查看寝室推广动态。';
            }
            this.dialogVisible = true;
        },

        /**
         * 关闭弹窗
         */
        handleDialogClose() {
            this.ruleForm.info = '';
            this.type = 'add';
            this.getTableData();
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        padding: 24px;
        background: #fff;
        box-sizing: border-box;

        /*header*/

        .header {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #F0F2F5;

            .header-title {
                color: #333333;
                font-size: 20px;
                height: 20px;
                font-weight: 500;
                position: relative;
                margin-left: 12px;
                margin-bottom: 24px;

                &::before {
                    content: '';
                    position: absolute;
                    left: -8px;
                    top: -1px;
                    width: 3px;
                    height: 20px;
                    background: #1890FF;
                }
            }
        }

        /*筛选*/

        .filter-view {
            margin-top: 24px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .header-new-box {
                display: flex;
                align-items: center;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                white-space: nowrap;
                margin-right: 24px;
                margin-bottom: 24px;

                &-title {
                    margin-right: 16px;
                    white-space: nowrap;
                }
            }
        }

        .tips-view {
            display: flex;
            align-items: center;
            padding: 12px 24px;
            margin: 12px 0;
            min-height: 42px;
            line-height: 20px;
            background: #FFF6D6;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #896C43;
        }
        // 表格
        .data-table {
            ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
            // 操作按钮
            .option-btn-group {
                .el-button {
                    margin-left: 0;
                    margin-right: 10px;
                }
            }
        }
        /deep/ .el-table td {
            border-bottom: 0;
        }

        /* 分页 */

        .pagination-wrapper {
            padding-top: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    .footer-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
    }
    .dialog-btn {
        text-align: center;
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-dialog__body {
        max-height: 600px;
        overflow: auto;
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        textarea[name='editorValue'] {
            display: none;
        }
    }
    /deep/ .el-textarea__inner {
        resize: none;
    }
}
</style>
